{% load i18n %}

{% if headers %}
  <div class="row">
    <div class="col-md-12">
      <div role="tabpanel">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active">
            <a href="#previewpane" aria-controls="previewpane" role="tab" data-toggle="tab" id="preview-tab-label">{% trans "Preview" %}</a>
          </li>
          {% if query.id and query.snapshot %}
            <li role="presentation">
              <a href="#snapshots" aria-controls="snapshots" role="tab" data-toggle="tab">{% trans "Snapshots" %}</a>
            </li>
          {% endif %}
          {% if data %}
            <li role="presentation">
              <a href="#pivot" aria-controls="pivot" role="tab" data-toggle="tab" id="pivot-tab-label">{% trans "Pivot" %}</a>
            </li>
          {% endif %}
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="previewpane">
            <div class="panel panel-default">
              <div class="panel-heading">
                <div class="row">
                  <div class="col-md-6">
                    {% if data %}<a title="{% trans "Show row numbers" %}" id="counter-toggle" href="#">#</a>&nbsp;{% endif %}
                    <span class="panel-title">
                      {% blocktrans with execution_time=duration|floatformat:2 %}
                      Execution time: {{ execution_time }} ms</span>
                      {% endblocktrans %}
                  </div>
                  <div class="col-md-6 text-right">
                    <span class="row-control">
                      {% if rows > total_rows %}
                        {% blocktrans %}
                          Showing <input class="rows-input" type="text" name="rows" id="rows" value="{{ total_rows }}" /> of {{ total_rows }} total rows.
                        {% endblocktrans %}
                      {% else %}
                        {% blocktrans %}
                          First <input class="rows-input" type="text" name="rows" id="rows" value="{{ rows }}" /> of {{ total_rows }} total rows.
                        {% endblocktrans %}
                      {% endif %}
                    </span>
                  </div>
                </div>
              </div>
              <div class="overflow-wrapper">
                <table class="table table-striped table-hover" id="preview">
                  <thead class="data-headers">
                    <tr>
                      <th class="preview-header counter"></th>
                      {% for h in headers %}
                        <th class="preview-header"><span class="sort" data-sort="{{ forloop.counter0 }}" data-dir="asc">{{ h }}</span></th>
                      {% endfor %}
                    </tr>
                    <tr class="stats-th">
                      <th class="counter"></th>
                      {% for h in headers %}
                        <th>
                          {% if h.summary %}
                            <i class="stats-expand glyphicon glyphicon-education"></i>
                            <div class="stats-wrapper">
                              {% for label, value in h.summary.stats.items %}
                                <div class="stat-wrapper"><span class="stat-label">{{ label }}:&nbsp;</span><span class="stat-value">{{ value }}</span></div>
                              {% endfor %}
                            </div>
                          {% endif %}
                        </th>
                      {% endfor %}
                    </tr>
                  </thead>
                  <tbody class="list">
                    {% if data %}
                      {% for row in data %}
                        <tr class="data-row">
                          <td class="counter">{{ forloop.counter0 }}</td>
                            {% for i in row %}
                              {% if unsafe_rendering %}
                                <td class="{{ forloop.counter0 }}">{% autoescape off %}{{ i }}{% endautoescape %}</td>
                              {% else %}
                                <td class="{{ forloop.counter0 }}">{{ i }}</td>
                              {% endif %}
                            {% endfor %}
                        </tr>
                      {% endfor %}
                    {% else %}
                      <tr class="text-center"><td colspan="{{ headers|length }}">{% trans "Empty Resultset" %}</td></tr>
                    {% endif %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          {% if query.id and query.snapshot and query.snapshots %}
            <div role="tabpanel" class="tab-pane" id="snapshots">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <span class="panel-title">
                    {% blocktrans with snapshots_length=snapshots|length %}{{ snapshots_length }} Snapshots <small>(oldest first)</small>{% endblocktrans %}
                  </span>
                </div>
                <div class="overflow-wrapper">
                  <p>
                    <ul>
                      {%  for s in snapshots %}
                        <li><a href='{{ s.url }}'>{{ s.last_modified }}</a></li>
                      {% endfor %}
                    </ul>
                  </p>
                </div>
              </div>
            </div>
          {% endif %}
          {% if data %}
            <div role="tabpanel" class="tab-pane" id="pivot">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="row">
                    <div class="col-md-6">
                      <span class="panel-title">{% trans "Pivot" %}</span>
                    </div>
                    <div class="col-md-6 text-right">
                      <button id="export-csv" class="btn btn-primary btn-xs"><i class="fa fa-download"></i> {% trans "Export to CSV" %}</button>
                      <button id="save-image" class="btn btn-primary btn-xs"><i class="fa fa-picture-o"></i> {% trans "Save Image" %}</button>
                      <a id="pivot-bookmark" data-baseurl="{% url "explorer_playground" %}?querylog_id={{ ql_id }}" href="#"><i class="glyphicon glyphicon-link"></i></a>
                    </div>
                  </div>
                </div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-sm-12 pivot-table-col">
                      <div class="overflow-wrapper">
                        <div class="pivot-table"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endif %}
